<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="keywords" content="" />
    <meta name="description" content="taoqianbao,demo ajax scroll" />
    <meta name="robots" content="all" />
    <meta name="author" content="taoqianbao, taoqianbao(at)gmail(dot)com" />
    <meta name="copyright" content="(c) 2012-2014 taoqianbao">
    <title>jQuery.LocalScroll - AJAX Demo</title>
    <link rel="shortcut icon" href="" type="image/x-icon" />
    <style type="text/css">
        /*base.css*/
        body { padding: 0 5px; font-family: Verdana, sans-serif; background-color: #DDD; }
        ul, li, h3, h2, h1, p { padding: 0; margin: 0; list-style: none; }
        
        .sidebar { position: absolute; right: 5px; top: 15px; }
        
        #links { border: 1px solid black; /*width:210px;*/ padding: 10px; background-color: white; }
        #links h3 { color: #933; }
        #links ul { padding: 8px 0 3px 20px; }
        #links li { list-style-type: circle; }
        #links a { color: #69C; }
        
        h1 { margin: 20px 0; color: #5B739C; }
        h1 strong { font-size: 13px; color: #777; }
        h2.title { color: #933; margin-bottom: 10px; text-align: right; }
        .clear { clear: left; }
    </style>
    <style type="text/css">
        /*style.css*/
        #content { overflow: hidden; width: 630px; background-color: white; position: relative; float: left; height: 400px; }
        #content h2 { color: #993333; margin: 20px 0pt; }
        #content img { left: 191px; position: absolute; top: 101px; z-index: 5; }
        
        #content .loading { font-size: 1.2em; margin: 190px 0pt 0pt 265px; color: #933; }
        #navigation { border-right: 0px !important; border-right: 1px; float: left; width: 110px; background-color: #5B739C; height: 400px; }
        #navigation li { margin: 48px 0pt 48px 20px; }
        #navigation a { color: white; font-weight: bolder; text-decoration: none; font-size: 85%; }
        #content a { color: #777; font-weight: bolder; text-decoration: none; }
        #navigation a.scrolling { color: #FF0000; }
        .section { margin: -1px 0 0 -1px; width: 1900px; border-bottom: 1px solid black; position: relative; z-index: 1; }
        
        .section .sub { position: relative; float: left; padding: 9px 21px 42px 45px; width: 567px; height: 352px; }
        .section .sub p { width: 550px; margin: 16px 0; font-size: 85%; line-height: 1.4em; }
        .section .next, .section .prev { font-size: 18px; position: absolute; bottom: 15px; letter-spacing: -2px; }
        .section .next { right: 30px; }
        .section .prev { left: 30px; }
        
        .sub-sections { position: absolute; right: 20px; top: 5px; z-index: 2; }
        .sub-sections li { margin: 0 10px; padding: 0; float: left; }
        .sub-sections a { font-size: 85%; }
    </style>
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script src="../js/jquery.localscroll-min.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            /**
            * THIS BLOCK IS SPECIFICALLY FOR THE DEMO
            * Binding of the section links, to load other sections inside the content div
            */
            var $sections = $('#navigation a'), // Links on the left
		last = null; // Last section

            $sections.click(function () {
                if (last != this) { // let's avoid needless requests
                    var url = 'html/' + this.hash.slice(1) + '.html';
                    $('#content').html('<p class="loading">Loading...</p>').load(url, function () {
                        this.scrollLeft = 0; //scroll back to the left
                    });
                }
                last = this;
                this.blur(); // Remove the awful outline
                return false;
            });

            $sections.eq(0).click(); // Load the first section

            /**
            * Actual call to jQuery.localScroll.
            * Most jQuery.LocalScroll's defaults, belong to jQuery.ScrollTo, check it's demo for an example of each option.
            * @see http://flesler.demos.com/jquery/scrollTo/
            */

            $('#content').localScroll({// Only the links inside that jquery object will be affected
                lazy: true, // This is the KEY setting here, makes the links work even after an Ajax load.
                target: '#content', // The element that gets scrolled
                axis: 'x', // Horizontal scrolling
                duration: 500,
                onBefore: function (e, subsec, $cont) {//'this' is the clicked link
                    if (this.blur)
                        this.blur(); // Remove the awful outline
                }
            });
        });
    
    </script>
</head>
<body>
    <h1>
        jQuery.LocalScroll&nbsp;<strong>by Ariel Flesler</strong></h1>
    <div class="sidebar">
        <h2 class='title'>
            AJAX Demo</h2>
        <div id="links">
            <h3>
                Links</h3>
            <ul>
                <li><a target="_blank" href="http://plugins.jquery.com/project/LocalScroll">Project
                    Page</a></li>
                <li><a target="_blank" href="http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html">
                    Main blog article</a></li>
                <li><a target="_blank" href="http://flesler.blogspot.com/search/label/jQuery.LocalScroll">
                    All articles</a></li>
                <li><a href="../">Regular Demo</a></li>
                <li><a href="../../scrollTo/">ScrollTo Demo</a></li>
            </ul>
        </div>
    </div>
    <ul id="navigation">
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
    </ul>
    <div id="content">
        <p class="loading">
            Loading...</p>
    </div>
</body>
</html>
